import { defineComponent, type ExtractPropTypes } from 'vue';


// Components
import { ItemTemplateGeneralType } from '../interface';
import ResultItem from './resultItem';

export const resultListProps = {
  itemTemplateGeneral: {
    type: Array<ItemTemplateGeneralType>,
    default: () => [
      {
        type: 'title',
        valueType: '',
        field: '',
        expression: '',
        ellipsis: true,
        demo: '',
      },
      {
        type: 'thumb',
        valueType: '',
        field: '',
        expression: '',
        ellipsis: false,
        demo: '',
      },
      {
        type: 'info',
        valueType: '',
        field: '',
        expression: '',
        ellipsis: true,
        demo: '',
      },
      {
        type: 'info',
        valueType: '',
        field: '',
        expression: '',
        ellipsis: true,
        demo: '',
      },
    ],
  },
  list: {
    type: Array,
    default: () => [],
  },
  searchValue:String
};

export type ResultListProps = ExtractPropTypes<typeof resultListProps>;

export default defineComponent({
  props: resultListProps,
  emits: ['clickItem'],

  setup(props, { slots, emit }) {
    const renderItem = (item: any, index: number) => {
      const onClick = () => emit('clickItem', item, index);

      return (
        <ResultItem
          itemTemplateGeneral={props.itemTemplateGeneral}
          data={item}
          searchValue={props.searchValue}
          onClick={onClick}
        />
      );
    };

    const renderList = (list: any[]) => {
      if (list) {
        return list.map((item, index) => renderItem(item, index));
      }
    };

    return () => {
      const List = renderList(props.list);

      return (
        <div>
          {List}
          {slots.default?.()}
        </div>
      );
    };
  },
});
